{% extends "baseMenuMapa.html" %}

{% block extras %}
<div class="row-fluid pagination-centered">
  {% if error %} <div style="text-align: center;"><font color="red" size=2>Error: {{ error }}</font></div>{% endif %}
  <h4> Predicciones para la parada {{ parada }} de la linea {{ linea }}</h4>
    <div id="tableContainer" class="row">
      {% if predicciones %}
      <div class="span4 center">
      <table class="table table-striped">
      	<thead>
			<tr>
				<th><a>Colectivo</a></th>
				<th><a>Tiempo estimado [m:ss]</a></th>
			</tr>
		</thead>
		<tbody>
      {% for bus in predicciones %}
        <tr>
        	<td>{{ bus.bus }}</td>
        	{% if bus.time == o and bus.timeseg == 0 %}
        	<td>Llegando</td>
        	{% else %}
        	<td>{{ bus.time }}:{{ bus.timeseg }}</td>
        	{% endif %}
       	</tr>
      {% endfor %}
      </tbody></table>
      {% if timeStamp %}<a><font size=2>Fecha: {{ timeStamp }}</font></a>{% endif %}
      </div>
      <div class="span8">
      	<div id="mapas" style="width:100%; height:350px" >Aca va el mapa</div>
      </div>
    {% endif %}
</div>
<br>
<div><form name = "formPrediccion" action="" method="post">{% csrf_token %}
   	<BUTTON class="btn-primary" type="submit" name="action" value="prediction">Volver a elegir destino</BUTTON>
</form></div>
{% endblock %}

{% block marcas %}   
    {% if route %}
    	{% if stopList %}{% for stop in stopList %}{% if stop.paradaactiva %}{% if parada = stop %}
    			markerPosition = new google.maps.LatLng({{ stop.latitud }},{{ stop.longitud}});
       			marker = new google.maps.Marker({
        			map:map,
        			draggable:false,
        			position: markerPosition,
        			title: "Parada: {{ stop.calle1 }} {% if stop.calle2 == '' %}& {{ stop.calle2 }} {% endif %} ({{ stop.orden }})",
        			icon: markerImageSelected
    			});
    			markerSelected = marker
    			google.maps.event.addListener(map, 'click', toggleBounce); //Click sobre el marker
    			{% endif %}
    			limits.extend(markerPosition);
    	{% endif%}{% endfor %}{% endif %} 
    	
    	var flightPlanCoordinates = [
	      {% for stop in stopList %}new google.maps.LatLng({{ stop.latitud }},{{ stop.longitud}}),
	      {% endfor %}
		];
		var flightPath = new google.maps.Polyline({
		    path: flightPlanCoordinates,
		    strokeColor: "#FF0000",
		    strokeOpacity: 1.0,
		    strokeWeight: 2
		});
	
	 	flightPath.setMap(map);
    {% endif %}
    {% if predicciones %}{% for unidad in predicciones %}
    	markerPosition = new google.maps.LatLng({{ unidad.lat }},{{ unidad.lon}});
       	marker = new google.maps.Marker({
 			map:map,
 			draggable:false,
 			position: markerPosition,
 			title: "Unidad: {{ unidad.bus }} - Latitud: {{ unidad.lat }} - Longitud: {{ unidad.lon}}",
 			icon: markerImageBus
		});
    {% endfor %}{% endif %}
{% endblock %}

{% block extraScripts %}<script>setTimeout('document.location.reload()',60000); </script>{% endblock %}
